<template>
	<view class="scroll-swiper">
		<view class="scroll-wrap" id="scrollwrap">
			<view :class="`prefix ${prefixShow ? 'show': ''}`" @click="fixClick('prefix')">
				<u-icon name="arrow-left" size="32"></u-icon>
			</view>
			<scroll-view scroll-x="true" scroll-with-animation="true" :scroll-left="scrollLeft" @scroll="onScroll">
				<view class="tabs" id="tabs">
					<view :class="`tab-item ${index == current ? 'active': ''}`" v-for="(item, index) in tabs"
						:key="item.value" @click="click(index)">
						<text>{{item.name}}</text>
					</view>
				</view>
			</scroll-view>
			<view :class="`suffix ${suffixShow ? 'show': ''}`" @click="fixClick('suffix')">
				<u-icon name="arrow-right" size="32"></u-icon>
			</view>
		</view>

		<u-swiper mode="none" :current="current" :height="height" :autoplay="false" :circular="false" :list="tabs"
			keyName="image" @change="change" @click="click"></u-swiper>
	</view>
</template>

<script>
	export default {
		name: "ScrollSwiper",
		props: {
			height: {
				type: Number,
				default: 260,
			}
		},
		computed: {
			prefixShow() {
				return this.oldScrollLeft > 40;
			},
			suffixShow() {
				return this.oldScrollLeft + this.clientWidth < this.scrollWidth - 10;
			}
		},
		data() {
			return {
				tabs: [{
						name: '全部',
						value: 1,
						image: 'https://h5.schengle.com/group1/M00/46/18/wKilJ2B0M-GAc4ZvAAMmuLmrUDI212.png'
					},
					{
						name: '待支付',
						value: 2,
						image: 'https://h5.schengle.com/group1/M00/46/18/wKilJ2B0M-GAc4ZvAAMmuLmrUDI212.png'
					},
					{
						name: '待使用',
						value: 3,
						image: 'https://h5.schengle.com/group1/M00/46/18/wKilJ2B0M-GAc4ZvAAMmuLmrUDI212.png'
					},
					{
						name: '进行中',
						value: 4,
						image: 'https://h5.schengle.com/group1/M00/46/18/wKilJ2B0M-GAc4ZvAAMmuLmrUDI212.png'
					},
					{
						name: '已使用',
						value: 5,
						image: 'https://h5.schengle.com/group1/M00/46/18/wKilJ2B0M-GAc4ZvAAMmuLmrUDI212.png'
					},
					{
						name: '已取消',
						value: 6,
						image: 'https://h5.schengle.com/group1/M00/46/18/wKilJ2B0M-GAc4ZvAAMmuLmrUDI212.png'
					}, {
						name: '已过期',
						value: 7,
						image: 'https://h5.schengle.com/group1/M00/46/18/wKilJ2B0M-GAc4ZvAAMmuLmrUDI212.png'
					}
				],
				current: 0,
				clientWidth: 0,
				scrollWidth: 0,
				scrollLeft: 0,
				oldScrollLeft: 0
			}
		},
		mounted() {
			const query = uni.createSelectorQuery().in(this);
			query.select('#scrollwrap').boundingClientRect();
			query.selectAll('.tab-item').boundingClientRect();
			query.exec(res => {
				let width = 0
				if (res) {
					const [wrap, items] = res;

					this.clientWidth = wrap.width;

					items.forEach(x => {
						width += x.width
					})
					this.scrollWidth = width;
				}
			})
		},
		methods: {
			change(index) {
				this.current = index;
			},
			click(index) {
				this.current = index
			},
			fixClick(flag) {
				if (flag === "prefix") {
					this.scrollLeft = this.oldScrollLeft
					this.$nextTick(() => {
						this.scrollLeft = 0
						this.oldScrollLeft = 0
					});
				} else {
					this.scrollLeft = this.oldScrollLeft
					this.$nextTick(() => {
						this.scrollLeft = this.scrollWidth - this.clientWidth
						this.oldScrollLeft = this.scrollLeft
					});
				}
			},
			onScroll(e) {
				this.scrollWidth = e.detail.scrollWidth
				this.oldScrollLeft = e.detail.scrollLeft
			}
		}
	}
</script>

<style lang="scss" scoped>
	.scroll-wrap {
		position: relative;
		margin-bottom: 4rpx;
		box-shadow: 0 2rpx 2rpx rgba(0, 0, 0, 0.15);

		.prefix,
		.suffix {
			position: absolute;
			width: 80rpx;
			top: 0;
			bottom: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #FFFFFF;
			box-shadow: 0 0rpx 0rpx rgba(0, 0, 0, 0.20), 0 2rpx 2rpx rgba(0, 0, 0, 0.15);
			transition: all 0.6s ease-in;
			z-index: 10;
		}

		.prefix {
			left: -100%;

			&.show {
				left: 0;
			}
		}

		.suffix {
			right: -100%;

			&.show {
				right: 0;
			}
		}
	}
	
	.tabs {
		width: 100%;
		position: relative;
		white-space: nowrap;
		box-sizing: border-box;

		.tab-item {
			position: relative;
			display: inline-block;
			text-align: center;
			transition-property: background-color, color;
			width: auto;
			height: 100rpx;
			line-height: 100rpx;
			font-size: 32rpx;
			padding: 0px 30rpx;
			color: #999999;
			flex: 1 1 auto;

			&::after {
				content: '';
				position: absolute;
				left: 50%;
				bottom: 0;
				height: 2rpx;
				width: 50%;
				transform: translate(-50%, 0);
				background: rgba(0, 0, 0, 0);
				transition: all 0.4s ease-in;
			}

			&.active {
				color: #333333;

				&::after {
					background: rgba(0, 0, 0, 1);
				}
			}
		}
	}
</style>
